<template>
    <el-form label-width="100px" :rules="rules" ref="formRef" :model="form">
        <el-form-item label="用户id" prop="userId">
            <el-input-number v-model="form.userId" :min="1" placeholder="请输入用户ID" />
        </el-form-item>
        <el-form-item label="咨询师id" prop="consultantId">
            <el-input-number v-model="form.consultantId" :min="1" placeholder="请输入咨询师ID" />
        </el-form-item>
        <el-form-item label="选择时间">
        <el-date-picker
          v-model="form.time"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup>
import { ref, defineProps } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';




const props = defineProps({
    form: {
        type: Object,
        default: () => {
            return {};
        }
    }
});


const form = ref({
    userId: '',
    consultantId: '',
    time: ''
});
form.value = { ...props.form };

const rules = {
    userId: [
        { required: true, message: '请输入用户id', trigger: 'blur' }
    ],
    consultantId: [
        { required: true, message: '请输入咨询师id', trigger: 'blur' }
    ],
    time: [
        { required: true, message: '请输入预约时间', trigger: 'blur' }
    ]
};

const formRef = ref(null);


const submitForm = () => {
   
    formRef.value.validate(async (valid) => {
        if (valid) {
            console.log("---------------------");
                    console.log('表单数据：',form.value);
                    console.log("=====================");
            await axios.post("api/consultationAppointment/update", form.value, {
                header: {
                    'Content-Type': 'application/json'
                }
            })
            ElMessage.success('提交成功!');
            console.log('表单数据：', form.value);
        } else {
            ElMessage.error('请检查输入内容');
        }
    });
};


const resetForm = () => {
    formRef.value.resetFields();
};

</script>
<style lang="less" scoped>
.el-form {
    max-width: 500px;
    margin: 0 auto;
}
</style>
